<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery\jquery.js"></script>
    <style>
        .a{background-color: red;}
        .b{background-color: pink;}
        .c{background-color: yellow;}
        .d{background-color: blueviolet;}
    </style>
</head>
<body>
    <ul>
        <li>一地在要工</li>
        <li>上是中国同</li>
    </ul>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li class="third-item">list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    <button>切换</button>
    <script>
        $(function(){
            //index 索引号从0开始，element相当于this
            $("li").each(function(index,element){
                console.log(index+$(element).text())
            })

            // $( "li.third-item" ).siblings().css( "background-color", "red" ); //1245 娈红
            // $( "li.third-item" ).next().css( "background-color", "red" ); //4 娈红
            // $( "li.third-item" ).prev().css( "background-color", "red" ); //2 娈红
            // $( "li.third-item" ).filter().css( "background-color", "red" ); // 娈红
            $( "li.third-item" ).parent().attr("id","x"); //ul标签增加id id='x'

            // $("li").css("backgroundColor","red") //方法1
            // $("li").addClass("a") //方法2

            $("button").click(function(){
                // $("li").toggleClass("a") //切换颜色 

                // $("li:odd").toggleClass("a") //切换颜色 
                // $("li:even").toggleClass("b") //切换颜色 
                // $("li").hover(function(){
                //     $("this").toggleClass("c")
                // },function(){
                //     $("this").toggleClass("d")
                // })
            })

            $("li:odd").addClass("a") //切换颜色 
                $("li:even").addClass("b") //切换颜色 
                $("li").hover(function(){
                    $(this).addClass("c")
                },function(){
                    $(this).removeClass("c")
                })
                $("li").onclick(function(){
                    $(this).addClass("d")
                },function(){
                    $(this).removeClass("d")
                })

        })
    </script>
</body>
</html>